import { defineComponent, reactive, onMounted, inject } from "vue";
import { CloseOutlined } from "@ant-design/icons-vue";
import { getStatisticData, getStatisticList } from "@/api/animes.ts";
import Echarts from "@/components/ECharts";
import AnmineItem from "@/components/AnmineItem";

export default defineComponent({
  name: "Statistic",
  props: {
    onHideStatistic: {
      type: Function
    }
  },
  setup(props, context) {
    const state = reactive({
      activeKey: 1,
      loading: true,
      showList: false,
      showChart: false,
      animes: [],
      result: {},
      pieOption1: {
        title: {
          text: "前10国创占比",
          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "国创" },
              { value: 735, name: "番剧" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      pieOption2: {
        title: {
          text: "前50国创占比",

          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "国创" },
              { value: 735, name: "番剧" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      pieOption3: {
        title: {
          text: "前100国创占比",

          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "国创" },
              { value: 735, name: "番剧" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      pieOption4: {
        title: {
          text: "全部国创占比",

          left: "center"
        },
        tooltip: {
          trigger: "item",
          formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
          orient: "vertical",
          left: "left"
        },
        series: [
          {
            name: "",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "国创" },
              { value: 735, name: "番剧" }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)"
              }
            }
          }
        ]
      },
      lineOption: {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ["番剧", "国创", "前50国创数量", "前50番剧数量"]
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: [
          {
            type: "category",
            data: [],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: "value"
          }
        ],
        series: [
          {
            name: "国创",
            type: "line",
            smooth: true,
            data: []
          },
          {
            name: "番剧",
            type: "line",
            smooth: true,
            data: []
          },
          {
            name: "前50国创数量",
            type: "line",

            data: []
          },
          {
            name: "前50番剧数量",
            type: "line",

            data: []
          }
        ]
      }
    });

    const weight = inject("weight");
    const isDefault = inject("isDefault");

    const backToList = () => {
      context.emit("hideStatistic");
    };

    const getStaticData = async () => {
      // @ts-ignore
      const res = await getStatisticData(weight, isDefault);
      console.log(res);
      state.result = res;
      state.pieOption1.series[0].data[0].value = res["10"].arr[0];
      state.pieOption1.series[0].data[1].value = res["10"].arr[1];

      state.pieOption2.series[0].data[0].value = res["50"].arr[0];
      state.pieOption2.series[0].data[1].value = res["50"].arr[1];

      state.pieOption3.series[0].data[0].value = res["100"].arr[0];
      state.pieOption3.series[0].data[1].value = res["100"].arr[1];

      state.pieOption4.series[0].data[0].value = res["all"][0];
      state.pieOption4.series[0].data[1].value = res["all"][1];

      Object.keys(res).forEach((key: string) => {
        if (key.length == 4) {
          // @ts-ignore
          state.lineOption.xAxis[0].data.push(key);
          // @ts-ignore
          state.lineOption.series[0].data.push(res[key].arr[0]);
          // @ts-ignore
          state.lineOption.series[1].data.push(res[key].arr[1]);
          const tempArr = res[key].list.filter(
            (item: { season_type: number }) => item.season_type == 4
          );
          const tempArr2 = res[key].list.filter(
            (item: { season_type: number }) => item.season_type == 1
          );
          // @ts-ignore
          state.lineOption.series[2].data.push(tempArr.length);
          // @ts-ignore
          state.lineOption.series[3].data.push(tempArr2.length);
        }
      });
      state.showChart = true;
      state.loading = false;
    };

    const handlePieClick = async (params: {
      name: string;
      value: number;
      seriesName: string;
    }) => {
      const { name, value, seriesName } = params;
      let index = name == "番剧" ? 1 : 0;
      if (seriesName) {
        index = seriesName == "番剧" ? 1 : 0;
      }

      let num = 10;
      Object.keys(state.result).forEach(key => {
        if (seriesName.indexOf("50") > -1) {
          if (key == name) {
            num = parseInt(key);
          }
        } else if (
          state.result[key].arr &&
          state.result[key].arr[index] == value
        ) {
          if (key == "all") {
            num = 100;
          } else {
            num = parseInt(key);
          }
        }
      });
      const res = await getStatisticList({
        type: index ? index : 4,
        num,
        isDefault,
        weight
      });
      state.animes = res;
      if (state.animes.length) {
        state.showList = true;
      }
    };

    onMounted(() => {
      getStaticData();
    });

    return () => {
      return (
        <div class="statistic-con">
          {state.showChart ? (
            <div class="pie-charts">
              <div class="chart-item">
                <Echarts
                  options={state.pieOption1}
                  onHandleClick={handlePieClick}
                />
              </div>
              <div class="chart-item">
                <Echarts
                  options={state.pieOption2}
                  onHandleClick={handlePieClick}
                />
              </div>
              <div class="chart-item">
                <Echarts
                  options={state.pieOption3}
                  onHandleClick={handlePieClick}
                />
              </div>
              <div class="chart-item">
                <Echarts
                  options={state.pieOption4}
                  onHandleClick={handlePieClick}
                />
              </div>
            </div>
          ) : (
            ""
          )}

          {state.showChart ? (
            <div class="line-chart">
              <Echarts
                options={state.lineOption}
                onHandleClick={handlePieClick}
              />
              {state.showList ? (
                <div class="list-con">
                  <div class="card-list">
                    {state.animes.map(item => {
                      return <AnmineItem data={item} />;
                    })}
                  </div>
                  <span
                    class="close-icon"
                    onClick={() => {
                      state.showList = false;
                    }}
                  >
                    <CloseOutlined />
                  </span>
                </div>
              ) : (
                ""
              )}
            </div>
          ) : (
            ""
          )}

          <span class="close-icon" onClick={backToList}>
            <CloseOutlined />
          </span>
        </div>
      );
    };
  }
});
